<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('外呼记录列表')" />

    <th:block th:include="include :: video-js-css" />
    <th:block th:include="include :: video-js" />

    <style>
        #modal {
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }
        #modal-content {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            width: 650px; /* 设置模态框内容的宽度 */
        }
        #modal-close {
            position: absolute;
            right: 10px;
            top: 10px;
            font-size: 20px;
            cursor: pointer;
        }
        /* 隐藏video.js默认的关闭按钮 */
        .vjs-big-play-button {
            display: none !important;
        }
    </style>
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li>
                                <label th:text="#{outboundcdr.query.uuid}"></label>
                                <input type="text" name="uuid"/>
                            </li>
                            <li>
                                <label th:text="#{outboundcdr.query.callee}"></label>
                                <input type="text" name="callee"/>
                            </li>
                            <li>
                                <label th:text="#{outboundcdr.query.opnum}"></label>
                                <input type="text" name="opnum"/>
                            </li>
                            <li>
                                <label style="width: 105px" th:text="#{outboundcdr.query.timeLen}"></label>
                                <input type="number" id="timeLenStart" style="width: 150px" th:placeholder="#{outboundcdr.query.placeholder.timeLenStart}" name="params[timeLenStart]"/>
                                <span>-</span>
                                <input type="number" id="timeLenEnd" style="width: 150px" th:placeholder="#{outboundcdr.query.placeholder.timeLenEnd}" name="params[timeLenEnd]"/>

                            </li>
                            <li class="select-time">
                                <label th:text="#{outboundcdr.query.startTime}"> </label>
                                <input type="text" style="width:150px" class="time-input" data-type="datetime" data-format="yyyy-MM-dd HH:mm:ss" id="startTimeStart" th:placeholder="#{outboundcdr.query.placeholder.startTime}" name="params[startTimeStart]"/>
                                <span>-</span>
                                <input type="text" style="width:150px" class="time-input" data-type="datetime" data-format="yyyy-MM-dd HH:mm:ss" id="startTimeEnd" th:placeholder="#{outboundcdr.query.placeholder.endTime}" name="params[startTimeEnd]"/>
                            </li>
                            <li class="select-time">
                                <label th:text="#{outboundcdr.query.answeredTime}"> </label>
                                <input type="text" style="width:150px" class="time-input" data-type="datetime" data-format="yyyy-MM-dd HH:mm:ss" id="answeredTimeStart" th:placeholder="#{outboundcdr.query.placeholder.startTime}" name="params[answeredTimeStart]"/>
                                <span>-</span>
                                <input type="text" style="width:150px" class="time-input" data-type="datetime" data-format="yyyy-MM-dd HH:mm:ss" id="answeredTimeEnd" th:placeholder="#{outboundcdr.query.placeholder.endTime}" name="params[answeredTimeEnd]"/>
                            </li>
                            <li class="select-time">
                                <label th:text="#{outboundcdr.query.endTime}"> </label>
                                <input type="text" style="width:150px" class="time-input" data-type="datetime" data-format="yyyy-MM-dd HH:mm:ss" id="endTimeStart" th:placeholder="#{outboundcdr.query.placeholder.startTime}" name="params[endTimeStart]"/>
                                <span>-</span>
                                <input type="text" style="width:150px" class="time-input" data-type="datetime" data-format="yyyy-MM-dd HH:mm:ss" id="endTimeEnd" th:placeholder="#{outboundcdr.query.placeholder.endTime}" name="params[endTimeEnd]"/>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;<span th:text="#{btn.search}"></span></a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;<span th:text="#{btn.reset}"></span></a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

<!--            <div class="btn-group-sm" id="toolbar" role="group">-->
<!--                <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="cc:outboundcdr:export">-->
<!--                    <i class="fa fa-download"></i> 导出-->
<!--                </a>-->
<!--            </div>-->
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
            </div>
            <!-- 模态框 -->
            <div id="modal">
                <div id="modal-content">
                    <button id="modal-close">&times;</button>
                    <video id="audioPlayer" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="580" height="390">
                        <source src="" type="audio/mpeg">
                        Your browser does not support the audio tag.
                    </video>
                </div>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var prefix = ctx + "cc/outboundcdr";
        var linstenFlag = [[${@permission.hasPermi('cc:outboundcdr:listen')}]];
        var downloadFlag = [[${@permission.hasPermi('cc:outboundcdr:download')}]];

        $(function() {
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
                exportUrl: prefix + "/export",
                modalName: i18n('outboundcdr.modalName'),
                columns: [{
                    checkbox: true
                },
                {
                    field: 'id',
                    title: '${comment}',
                    visible: false
                },
                {
                    field: 'uuid',
                    title: i18n('outboundcdr.table.uuid'),
                    width: 120,
                },
                {
                    field: 'recordFilename',
                    title: i18n('outboundcdr.table.recordFilename'),
                    formatter: function(value, row, index, field) {
                        // 获取文件后缀
                        const extension = value.split('.').pop().toLowerCase();
                        // 判断文件类型
                        if (['wav', 'mp3', 'aac'].includes(extension)) {
                            return i18n('outboundcdr.table.audio');
                        } else if (['mp4', 'avi', 'mov'].includes(extension)) {
                            return i18n('outboundcdr.table.video');
                        } else {
                            return i18n('outboundcdr.table.none');
                        }
                    }
                },
                {
                    field: 'opnum',
                    title: i18n('outboundcdr.table.opnum'),
                },
                {
                    field: 'callee',
                    title: i18n('outboundcdr.table.callee'),
                },
                {
                    field: 'startTime',
                    title: i18n('outboundcdr.table.startTime'),
                    width: 120,
                    formatter: function(value, row, index, field) {
                        // 假设value是时间戳，单位是毫秒
                        var date = new Date(Number(value));
                        // 格式化日期为年-月-日 时:分:秒
                        var year = date.getFullYear();
                        var month = (date.getMonth() + 1).toString().padStart(2, '0');
                        var day = date.getDate().toString().padStart(2, '0');
                        var hour = date.getHours().toString().padStart(2, '0');
                        var minute = date.getMinutes().toString().padStart(2, '0');
                        var second = date.getSeconds().toString().padStart(2, '0');
                        return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
                    }
                },
                {
                    field: 'answeredTime',
                    title: i18n('outboundcdr.table.answeredTime'),
                    width: 120,
                    formatter: function(value, row, index, field) {
                        // 假设value是时间戳，单位是毫秒
                        var date = new Date(Number(value));
                        // 格式化日期为年-月-日 时:分:秒
                        var year = date.getFullYear();
                        var month = (date.getMonth() + 1).toString().padStart(2, '0');
                        var day = date.getDate().toString().padStart(2, '0');
                        var hour = date.getHours().toString().padStart(2, '0');
                        var minute = date.getMinutes().toString().padStart(2, '0');
                        var second = date.getSeconds().toString().padStart(2, '0');
                        return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
                    }
                },
                {
                    field: 'endTime',
                    title: i18n('outboundcdr.table.endTime'),
                    width: 120,
                    formatter: function(value, row, index, field) {
                        // 假设value是时间戳，单位是毫秒
                        var date = new Date(Number(value));
                        // 格式化日期为年-月-日 时:分:秒
                        var year = date.getFullYear();
                        var month = (date.getMonth() + 1).toString().padStart(2, '0');
                        var day = date.getDate().toString().padStart(2, '0');
                        var hour = date.getHours().toString().padStart(2, '0');
                        var minute = date.getMinutes().toString().padStart(2, '0');
                        var second = date.getSeconds().toString().padStart(2, '0');
                        return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
                    }
                },
                {
                    field: 'timeLen',
                    title: i18n('outboundcdr.table.timeLen'),
                    formatter: function(value, row, index, field) {
                        // 计算分钟数，向下取整
                        var timeLen = Math.ceil(value / 1000);
                        const minutes = Math.floor(timeLen / 60);
                        // 计算剩余的秒数，取余数
                        const seconds = timeLen % 60;
                        // 返回格式化后的时间字符串
                        if (minutes > 0) {
                            return `${minutes}分${seconds}秒`;
                        } else {
                            return `${seconds}秒`;
                        }
                    }
                },
                {
                    field: 'timeLenValid',
                    title: i18n('outboundcdr.table.timeLenValid'),
                    formatter: function(value, row, index, field) {
                        // 计算分钟数，向下取整
                        var timeLenValid = Math.ceil(value / 1000);
                        const minutes = Math.floor(timeLenValid / 60);
                        // 计算剩余的秒数，取余数
                        const seconds = timeLenValid % 60;
                        // 返回格式化后的时间字符串
                        if (minutes > 0) {
                            return `${minutes}分${seconds}秒`;
                        } else {
                            return `${seconds}秒`;
                        }
                    }
                },
                {
                    field: 'hangupCause',
                    title: i18n('outboundcdr.table.hangupCause'),
                    width: 100
                },
                {
                    title: i18n('outboundcdr.table.opra'),
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + linstenFlag + '" href="javascript:void(0)" onclick="openModal(\'' + row.wavFileUrl + '\')"><i class="fa fa-volume-up"></i>' + i18n('btn.record.linsten') + '</a> ');
                        actions.push('<a class="btn btn-success btn-xs ' + downloadFlag + '" href="javascript:void(0)" onclick="checkFileExistence(\'' + row.wavFileUrl + '\')"><i class="fa fa-download"></i>' + i18n('btn.record.download') + '</a>');
                        return actions.join('');
                    }
                }]
            };
            $.table.init(options);
        });


        var player; // 定义一个全局变量来存储播放器实例
        function openModal(filePath) {
            // 设置video标签的source属性
            var source = document.querySelector('#audioPlayer source');
            source.src = filePath;
            source.type = 'audio/mpeg'; // 确保类型正确

            // 初始化或更新播放器
            if (player) {
                player.src({ type: 'audio/mpeg', src: filePath });
            } else {
                player = videojs('audioPlayer');
            }
            $('#modal').show();
            player.play(); // 自动播放
        }

        // 关闭模态框
        $(document).on('click', '#modal-close', function() {
            $('#modal').hide();
            if (player) {
                player.pause(); // 暂停播放
            }
        });

        // 点击模态框外部区域关闭模态框
        $(document).on('click', '#modal', function(e) {
            if (e.target.id === 'modal') {
                $('#modal').hide();
                if (player) {
                    player.pause(); // 暂停播放
                }
            }
        });
        function checkFileExistence(url) {
            fetch(url, { method: 'HEAD' })
                .then(response => {
                    if (response.status === 200) {
                        // 文件存在，可以下载
                        window.location.href = url;
                    } else {
                        // 文件不存在，显示错误消息
                        $.modal.msgError('文件不存在！');
                    }
                })
                .catch(() => {
                    // 网络错误或文件不存在
                    $.modal.msgError('文件不存在！');
                });
        }
    </script>
</body>
</html>